<template>


<el-main>
<el-row>
<el-col :span="20" :offset="1">
<el-tabs type="border-card">
<el-tab-pane label="从机管理">

<el-row >
    <el-col :span="8" :offset="5">
        <el-form :model="formData" size="mini" label-width="180px" :validate-on-rule-change="false">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="hostaddr">
          <el-input v-model="formData.hostaddr"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input v-model="formData.port"></el-input>
        </el-form-item>
        <el-form-item label="协议" prop="protocol">
          <el-select v-model="formData.protocol" placeholder="请选择">
            <el-option
              v-for="item in protocols"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddHost()" v-if="$route.query.id == ''">添加从机</el-button>
          <el-button type="primary" @click="EditHost()" v-else>修改从机</el-button>
        </el-form-item>
      </el-form>
    </el-col>
</el-row>

    </el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</el-main>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      protocols: [
        {
          value: "http",
        },
        {
          value: "https",
        },
      ],
    };
  },
  created() {
    if (this.$route.query.id && this.$route.query.id !== "") {
      this.gethost();
    }
  },
  methods: {
    AddHost() {
              this.$router.go(-1)
      this.$http.Post(this.$api.host, this.formData, () => {
        this.$emit("close");
      });
    },
    EditHost() {
      this.$router.go(-1)
      this.$http.Put(
        this.$api.host + "/" + this.$route.query.id,
        this.formData,
        () => {
          this.$emit("close");
        }
      );
    },
    gethost(id) {
      this.$http.Get(this.$api.host, { id: id }, (res) => {
        this.formData = res;
      });
    },
  },
};
</script>